<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>运动网站登录</title>
	<style>
		@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: 'Poppins', sans-serif;
		}

		body {
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
			background: linear-gradient(45deg, #f06, #3cf);
			overflow: hidden;
		}

		.container {
			position: relative;
			width: 800px;
			height: 500px;
			padding: 40px;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 20px;
			box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
			border-top: 1px solid rgba(255, 255, 255, 0.2);
			border-left: 1px solid rgba(255, 255, 255, 0.2);
			backdrop-filter: blur(5px);
			display: flex;
			justify-content: space-between;
			align-items: center;
			overflow: hidden;
		}

		.container::before {
			content: '';
			position: absolute;
			width: 400px;
			height: 400px;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 50%;
			transform: translate(-250px, -120px);
			pointer-events: none;
		}

		.container::after {
			content: '';
			position: absolute;
			width: 350px;
			height: 350px;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 50%;
			transform: translate(150px, 150px);
			pointer-events: none;
		}

		.login-box {
			position: relative;
			width: 400px;
			padding: 40px;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 20px;
			box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
			border-top: 1px solid rgba(255, 255, 255, 0.5);
			border-left: 1px solid rgba(255, 255, 255, 0.5);
			backdrop-filter: blur(5px);
			z-index: 1;
		}

		.login-box h2 {
			font-size: 40px;
			font-weight: 600;
			color: #fff;
			text-align: center;
			margin-bottom: 40px;
			text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
		}

		.login-box .user-box {
			position: relative;
			width: 100%;
			margin-bottom: 40px;
		}

		.login-box .user-box input {
			width: 100%;
			padding: 10px 0;
			font-size: 16px;
			color: #fff;
			background: transparent;
			border: none;
			outline: none;
			border-bottom: 1px solid rgba(255, 255, 255, 0.5);
		}

		.login-box .user-box label {
			position: absolute;
			top: 0;
			left: 0;
			padding: 10px 0;
			font-size: 16px;
			color: #fff;
			pointer-events: none;
			transition: 0.5s;
		}

		.login-box .user-box input:focus ~ label,
		.login-box .user-box input:valid ~ label {
			top: -20px;
			left: 0;
			color: #f06;
			font-size: 12px;
		}

		.login-box input[type="submit"] {
			background: transparent;
			border: none;
			outline: none;
			color: #fff;
			background: #f06;
			padding: 10px 20px;
			cursor: pointer;
			border-radius: 5px;
			font-weight: 600;
			width: 100%;
			font-size: 16px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		}

		.login-box input[type="submit"]:active {
			opacity: 0.8;
		}

		.sports {
			position: absolute;
			right: -170px;
			bottom: -100px;
			width: 600px;
			height: 600px;
			background: url("sports.png");
			background-size: cover;
			animation: animate 10s ease-in-out infinite;
			transform-origin: bottom right;
		}

		@keyframes animate {
			0%,100% {
				transform: rotate(0deg);
			}
			25% {
				transform: rotate(15deg);
			}
			50% {
				transform: rotate(0deg);
			}
			75% {
				transform: rotate(-15deg);
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="login-box">
			<h2>登录</h2>
			<form>
				<div class="user-box">
					<input type="text" name="" required="">
					<label>用户名</label>
				</div>
				<div class="user-box">
					<input type="password" name="" required="">
					<label>密码</label>
				</div>
				<input type="submit" value="登录">
			</form>
		</div>
		<div class="sports"></div>
	</div>
</body>
</html>